<template>
  <div>
    <a-layout id="components-layout-side" style="min-height: 300px;">
      <!-- 左侧列表 -->
      <LeftMenu
        :collapsed="false"
        @cpage="getMenuItem"
        @isCollapsed="toggle"
        v-if="!isDetails"
      />
      <a-layout
        :style="{
          marginLeft: marginLeft + 'px',
          'margin-left': !isDetails ? '200px' : '0px',
        }"
        style="transition: .2s;"
      >
        <!-- 头部显示内容 -->
        <a-layout-header style="background: #fff; padding: 0" v-if="!isDetails">
          <a-input-search
            placeholder="输入关键字"
            enter-button
            :pressEnter="onSearch"
            :loading="searchLoading"
            size="large"
            style="width: 40%; margin-top: 10px; margin-left: 20px;"
            @search="onSearch"
          />
          <UserLoginBar ref="loginBar" />
        </a-layout-header>
        <!-- 显示主要内容 -->
        <a-layout-content
          :style="{
            margin: '0 16px 0 0',
            overflow: 'initial',
            width: '100%',
            height: '100%',
          }"
        >
          <div
            :style="{
              padding: '24px',
              background: '#ffff',
              minHeight: '360px',
            }"
          >
            <keep-alive v-if="focusMenuItem !== '/'">
              <router-view ref="reply" />
            </keep-alive>
            <template v-else>
              <a-row type="flex" justify="space-around" align="top">
                <a-col :span="16">
                  <!-- <Carousel /> -->
                  <template>
                    <a-timeline id="left" style="float: left;">
                      <a-timeline-item>小伙子网站</a-timeline-item>
                      <a-timeline-item>
                        <a href="https://jpdark.cn/" target="_blank"
                          >jp</a
                        ></a-timeline-item
                      >
                      <a-timeline-item color="red"
                        ><a href="https://yeziji.xyz/blog" target="_blank">
                          hwy</a
                        >
                      </a-timeline-item>
                    </a-timeline>
                  </template>

                  <template>
                    <a-timeline mode="right" style="z-index: 0;">
                      <a-timeline-item>常用网站</a-timeline-item>
                      <a-timeline-item
                        ><a href="https://www.runoob.com/" target="_blank"
                          >菜鸟教程</a
                        ></a-timeline-item
                      >
                      <a-timeline-item
                        ><a href="https://jwt.io/#debugger-io" target="_blank"
                          >JWT 解析</a
                        ></a-timeline-item
                      >
                      <a-timeline-item
                        ><a href="https://tool.lu/json" target="_blank"
                          >Json 格式化</a
                        ></a-timeline-item
                      >
                    </a-timeline>
                  </template>
                  <a-card :loading="loading" title="最新疑问">
                    <HelpListTable />
                  </a-card>
                </a-col>
                <a-col :span="7">
                  <LeaderBoard />
                  <a-card :style="{ marginTop: '10px' }">
                    <!-- 右侧当前状态 -->
                    <a-row>
                      <a-col :span="12">
                        <a-statistic
                          title="新发布文章"
                          :value="newNumber"
                          style="margin-right: 50px"
                        />
                        <a-statistic title="当前在线人数" :value="online" />
                      </a-col>
                      <a-col :span="12">
                        <a-statistic
                          title="与昨日相比指数"
                          :value="pies * 100"
                          :precision="2"
                          suffix="%"
                          :value-style="{ color: '#3f8600' }"
                          style="margin-right: 50px; width: 100%;"
                        >
                          <template #prefix>
                            <a-icon
                              type="swap"
                              v-if="pies === 0 || pies === 1"
                            ></a-icon>
                            <a-icon
                              v-else
                              :type="pies > 1 ? 'arrow-up' : 'arrow-down'"
                            />
                          </template>
                        </a-statistic>
                      </a-col>
                    </a-row>
                  </a-card>
                </a-col>
              </a-row>
            </template>
          </div>
        </a-layout-content>
        <a-layout-footer>
          <!-- 尾部编辑器 -->
          <!-- 评论 2 template -->
          <template v-if="isArticle && isOpen">
            <a-divider>发布文章</a-divider>
            <Editor />
          </template>
          <template v-if="isArticle && !isOpen">
            <a-empty
              image="http://img.yeziji.xyz/%E7%99%BB%E5%BD%95%E8%AE%BE%E7%BD%AE.png"
              :image-style="{
                height: '60px',
              }"
              style="margin-bottom: 100px;margin-top: 30px;"
            >
              <span slot="description">
                登陆后才可以发布文章！
                <a @click="detailLogin">点我登录</a>
              </span>
            </a-empty>
          </template>

          <!-- 回复信息 -->
          <template
            v-if="
              (this.$store.state.comment || isDetails) &&
                (!this.$store.state.editor || !isArticle)
            "
          >
            <a-divider>回复消息</a-divider>
            <ReplyModal @login="replyLogin" />
            <CommentListTable ref="commentList" />
          </template>

          <div style="margin-top: 10px; text-align: center ">
            Logger ©2021 Created by gzkemays
          </div>
        </a-layout-footer>
        <a-back-top />
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import LeftMenu from "@/components/Sider/LeftMenuSider";
import LeaderBoard from "@/components/LeaderBoard/LeaderBoard";
import Carousel from "@/components/Carousel/Carousel";
import Editor from "@/components/Editor/Editor";
import HelpListTable from "@/components/Table/HelpListTable";
import CommentListTable from "@/components/Table/CommentListTable";
import ReplyModal from "@/components/Modal/ReplyModal";
import UserLoginBar from "@/components/ButtonBar/UserLoginBar";
import { getPies } from "@/apis/article";
// 文章内容
const article = "ArticleListTable";
export default {
  data() {
    return {
      isOpen: this.$store.getters.token ? true : false,
      searchLoading: false,
      marginLeft: 200,
      focusMenuItem: this.$route.path,
      loading: false,
      isDetails: this.$route.name === "文章详情",
      isArticle: this.$route.name === "文章",
      newNumber: 0,
      pies: 0.0,
      tempPath: "",
    };
  },
  computed: {
    login() {
      return this.$store.state.user.token;
    },
    online() {
      return this.$store.state.online;
    },
  },
  components: {
    LeftMenu,
    Editor,
    LeaderBoard,
    Carousel,
    HelpListTable,
    CommentListTable,
    ReplyModal,
    UserLoginBar,
  },
  methods: {
    onSearch(value) {
      this.focusMenuItem = "/ArticleListTable/search?context=" + value;
      this.searchLoading = true;
      setTimeout(() => {
        this.searchLoading = false;
      }, 500);
    },

    toggle(width) {
      this.marginLeft = width;
    },
    getMenuItem(value) {
      this.focusMenuItem = value;
    },
    detailLogin() {
      this.$refs.loginBar.loginTag = true;
    },
    replyLogin(val) {
      this.$refs.reply.$refs.headerSider.$refs.loginBar.loginTag = true;
    },
    getPies() {
      getPies().then((res) => {
        this.newNumber = res.data.newArticle;
        this.pies = res.data.newOldPies;
      });
    },
    detailsPageSwitch() {
      let name = this.$route.name;
      if (name === "Details") {
        this.$store.commit("showComment");
        this.isArticle = false;
        this.isDetails = true;
        this.$store.commit("setTempRouterPath", this.$route.path);
      } else {
        this.isDetails = false;
      }
    },
    allSwitch() {
      let name = this.$route.name;
      if (this.focusMenuItem.indexOf("search") === -1)
        this.focusMenuItem = this.$route.path;
      let tempName;
      if (name !== "Details") tempName = "椰子鸡集团技术平台";
      document.title = tempName;
      $(window).scrollTop(0);
      if (name === "Home" || name === "User") {
        this.$store.commit("hiddenEditor");
        this.$store.commit("hiddenComment");
        this.isArticle = false;
      }
      if (name === "Article") {
        this.$store.commit("showEditor");
        this.isArticle = true;
      }
      // 当前路由跳转时触发
      this.detailsPageSwitch();
    },
  },
  created() {
    this.getPies();
  },
  beforeMount() {
    // 其他路由跳转时触发
    this.detailsPageSwitch();
  },
  beforeDestroy() {},
  watch: {
    focusMenuItem: function(newValue) {
      this.$router.push(newValue);
      if (newValue === "/") {
        this.$store.commit("hiddenEditor");
        this.$store.commit("hiddenComment");
        this.isArticle = false;
      } else if (newValue.indexOf("/ArticleListTable") > -1) {
        this.isArticle = true;
        this.$store.commit("showEditor");
      }
    },
    $route: {
      handler() {
        this.allSwitch();
      },
    },
    login(newValue) {
      this.isOpen = newValue ? true : false;
    },
  },
  mounted() {
    this.allSwitch();
  },
};
</script>

<style>
#components-layout-side .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-side .trigger:hover {
  color: #1890ff;
}

#components-layout-side .logo {
  height: 135px;
  background: url(../../../public/images/yzj_logger.png) no-repeat;
  background-size: 100% 100%;
  margin: 16px;
}
.m-ant-layout-content {
  margin: "0 16px 0 0";
  overflow: "initial";
  width: "100%";
  height: "100%";
}
#left .ant-timeline-item {
  z-index: 2;
}
</style>
